<template>
  <div>
    <!--    <div style="max-height: 60vh; overflow-y: scroll">-->
    <el-form label-position="right" label-width="80px" :model="formData" ref="ruleForm" :rules="rules">
      <el-form-item label="资源名称">
        <div style="width: 95%;">
          <el-input v-model="formData.name" style="width: 100%;" disabled></el-input>
        </div>
      </el-form-item>
      <el-form-item label="目标版本" prop="version">
        <div style="width: 95%;">
          <el-select v-model="formData.version" placeholder="请选择" style="width: 100%;">
            <el-option v-for="item in versionList" :key="item" :label="item"
              :value="item">
            </el-option>
          </el-select>
        </div>
      </el-form-item>
      <el-form-item>
        <div style="display: flex; justify-content: right; width: 95%;">
          <el-button type="primary" @click="rollBackYamlDeploy('ruleForm')" class="el-button-primary-style">
            回滚
          </el-button>
          <el-button type="primary" class="el-button-primary-style" @click="closeRollbackDialog">
            取消
          </el-button>
        </div>
      </el-form-item>
    </el-form>
    <!--    </div>-->
  </div>
</template>

<script>

export default {
  name: "ServiceInstanceRollbackDialog",
  props: ["serviceInstance"],
  data() {
    return {
      formData: {
        name: '',
        version: '',
      },
      versionList: [],
      rules: {
        version: [
          { required: true, message: '请选择目标版本', trigger: 'change' }
        ],
      }
    }
  },
  methods: {
    closeRollbackDialog() {
      this.$emit("closeRollbackDialog");
      this.formData = {
        name: "",
        version: "",
      };
      this.versionList = [];
    },
    getVersionList() {
      this.$appManageApi.rollBackYamlDeploy(this.serviceInstance.id).then(res => {
        if (res && res.code === 200) {
          this.versionList = res.data;
        }
      })
    },
    rollBackYamlDeploy(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const param = { id: this.serviceInstance.id, version: this.formData.version };
          this.$appManageApi.rollBackYamlDeployByVersion(param).then(res => {
            if (res && res.code === 200) {
              this.$message.success(res.msg);
              this.$emit("closeRollbackDialog");
            }
          })
        } else {
          this.$message.error("请选择目标版本");
          return false;
        }
      });
    }
  },
  beforeMount() {
    this.formData.name = this.serviceInstance.appName;
    this.getVersionList();
  },
}
</script>

<style scoped></style>
